<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<link rel="stylesheet" type="text/css" href="../../css/demo.css" />
<script src="../../js/demo.js" type="text/javascript" charset="utf-8"></script>
<title>购物车</title>
</head>

<body>
	<!--header-->
	<div class="header">
		<div class="header-content">
			<ul class="nav left">
				<li><img src="../../img/regist-arrow.png" /></li>
				<li class="nav-one"><a href="javascript:history.go(-1);">返回</a></li>
				<li class="nav-two"><a href="../../index.html">关闭</a></li>
			</ul>
			<p class="left">侨盟小店</p>
			<div class="right nav_right">
				<img src="../../img/regist-list.png" />
			</div>
		</div>
	</div>
	<!--main-->
	<div class="main clear" style="margin-bottom: 0.95rem;">
			
		
	</div>
	<div class="shopaccount-foot">
		<ul class="shopaccount-footlist">
			<li class="shop-footlist-one"><img
				src="../../img/shopaccount-icon2.png" onclick="checkedAll()" id="allGood" />全选</li>
			<li class="shopcar-purchase-two"
				style="line-height: 0.5rem; text-align: right; margin-left: 1.4rem;">
				合计：<span id="totalPrice" style="color: #f84e37;">￥0</span> <br /> <span>不含运费</span>
			</li>
			<li class="shoppuchase-different"><input type="button"
				value="结算" class="shop-footlist-fou"
				style="border: none; margin-top: -0.05rem; line-height: 0.97rem; border-radius: 0;" onclick="settleAccounts()" /></li>
		</ul>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
	//显示购物车中的商品
		shoppingCartGood();
		function shoppingCartGood() {
			$.ajax({
					type : 'get',
					url : '/qiaomengapp/shopping-cart/api/shoppingCartGood',
					dataType : 'json',
					success : function(data) {
						/* 清空内容 */
						$('.main').html("");
						for ( var key in data) {
							$('.main').html($('.main').html()+
										"<div class='shopcarcount'><div class='shopcarcountlist'>"
										+ "<img src='../../img/shopaccount-icon2.png' shopName="+key+" onclick='checkedShopAll()' />"
										+ " <span	style='margin-right: 0.05rem;'>"
										+ key+ "</span><img src='../../img/shopcouple-icon7.png'	style='width: 1.02rem; height: 0.28rem;' />"
										+ "<img src='../../img/interface-icon2.png' style='width: 0.13rem; height: 0.23rem;' />"
										+ "<span	style='float: right;'>编辑</span>"
										+ "</div>" + "</div>");

							var data2 = data[key];
							for ( var i in data2) {
								var shopGood = data2[i];
								$('.main').html($('.main').html()+ "<div class='shopcarpurchase-checkox'>"
											+ "<img src='../../img/shopaccount-icon2.png' onclick='checkedGood()' shopName="+key+" shopGoodId="+shopGood.shopGoodId+" shopGroup price='"+shopGood.price+"' />"
											+ "<div class='shopcarpurchase-list left'>"
											+ "<img src='../../imgs/shopmanagement-icon.jpg'  />"
											+ "<ul class='shopcarpurchase-listes left' style='margin-right: -0.09rem;'>"
											+ "<li class='shopcarpurchase-one'><img class='left' src='../../img/interface-icon8.png'"+
											"style='width: 0.37rem; height: 0.37rem; margin-right: 0.18rem;' />"
											+ "<span style='display: block; margin-top: -0.05rem;'>"+ shopGood.goodDesc+ "</span></li>"
											+ "<li class='shopcarpurchase-two'>颜色："+ shopGood.colorName+ "； 鞋码："+ shopGood.size+ "；</li>"
											+ "<li class='shopcarpurchase-thr'><span style='color: #f84e37;'class='left'>￥"
											+ shopGood.price+ "</span><span class='right'"+
											"style='display: block; margin-right: 0.25rem;'>×1</span></li>"+ "</ul>"
											+ "</div>"+ "</div>");
								}
							}
						}
					});
		}
		
		/* 点击选中商品 */
		function checkedGood(){
			var $img=$(event.target);
			var src=$img.attr("src");
			if(src=="../../img/shopaccount-icon.png"){
				$img.attr("src","../../img/shopaccount-icon2.png");
			}else{
				$img.attr("src","../../img/shopaccount-icon.png");
			}
			/* 检测商铺全选按钮是否进行选中 */
			examineCheckedShopAll($img);
			/* 检测商品全选按钮  */
			examineCheckedAll();
			/* 计算总价格  */
			totalPrice();
		}
		
		/* 进行商铺商品的全选和全不选  */
		function checkedShopAll(){
			var $img=$(event.target);
			var src=$img.attr("src");
			if(src=="../../img/shopaccount-icon.png"){
				/* 下面的商品全部选中  */
				var shopName=$img.attr("shopName");
				$("img[shopName='"+shopName+"']").attr("src","../../img/shopaccount-icon2.png");
			}else{
				/* 下面的商品全部取消选中  */
				var shopName=$img.attr("shopName");
				$("img[shopName='"+shopName+"']").attr("src","../../img/shopaccount-icon.png");
			}
			/* 检测商品全选按钮  */
			examineCheckedAll();
			/* 计算总价格  */
			totalPrice();
		}
		
		/* 所有商品进行选中的不选中  */
		function checkedAll(){
			var $img=$(event.target);
			var src=$img.attr("src");
			if(src=="../../img/shopaccount-icon.png"){
				/* 商品全部选中  */
				$("img[shopName").attr("src","../../img/shopaccount-icon2.png");
				/* 自身也进行选中 */
				$img.attr("src","../../img/shopaccount-icon2.png");
			}else{
				/* 商品全部未选中  */
				$("img[shopName").attr("src","../../img/shopaccount-icon.png");
				/* 自身也进行未选中 */
				$img.attr("src","../../img/shopaccount-icon.png");
			}
			/* 计算总价格  */
			totalPrice();
		}
		
		/* 选择单独商品时上面的全选按钮是否要进行选中(检测全选按钮是否进行选中)  */
		function examineCheckedShopAll($img){
			/* 得到shopName */
			var shopName=$img.attr("shopName");
			/* 记录全选按钮是否进行选中  */
			var flag = true;
			$("img[shopName='"+shopName+"']:gt(0)").each(function(index,element){
				var $element=$(element);
				var src=$element.attr("src");
				if(src=="../../img/shopaccount-icon2.png"){
					flag=false;
				}
			});
			if(flag){
				$("img[shopName='"+shopName+"']:eq(0)").attr("src","../../img/shopaccount-icon.png");
			}else{
				$("img[shopName='"+shopName+"']:eq(0)").attr("src","../../img/shopaccount-icon2.png");
			}
			
		}
		
		/* 检测全选商品按钮是否被选中  */
		function examineCheckedAll(){
			/* 检测商品全选按钮是否进行选中  */
			var flag=true;
			$("img[shopGroup]").each(function(index,element){
				var $element=$(element);
				var src=$element.attr("src");
				if(src=="../../img/shopaccount-icon2.png"){
					flag=false;
				}
			});
			if(flag){
				$("#allGood").attr("src","../../img/shopaccount-icon.png");
			}else{
				$("#allGood").attr("src","../../img/shopaccount-icon2.png");
			}
		}
		
		/* 计算价格  */
		function totalPrice(){
			/* 记录总价格  */
			var totalPrice=0;
			$("img[shopName]").each(function (index,element){
				var $element=$(element);
				var src=$element.attr("src");
				var price= $element.attr("price");
				if(src=="../../img/shopaccount-icon.png"&&price!=undefined){
					totalPrice+=(price-0);
				}
			});
			$("#totalPrice").html("￥"+totalPrice);
		}
		
		/* 用户进行结算  */
		function settleAccounts(){
			var path="/qiaomengapp/html/shopcar/shopcar-interface.html?1=1"
			/* 判断用户是否进行了选择  */
			var flag = true;
			$("img[shopName]").each(function (index,element){
				var $element=$(element);
				var src = $element.attr("src");
				var shopGoodId=$element.attr("shopGoodId");
				if(src=="../../img/shopaccount-icon.png"&&shopGoodId!=undefined){
					path+="&shopGoodIds="+shopGoodId;
					flag=false;
				}
			});
			if(flag){
				alert("请选择结算的商品！");
			}else{
				/* 进行页面跳转  */
				location=path;
			}
		}
	</script>
</body>

</html>